<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="javascript/jquery.js"></script>
		<style type="text/css">
			table{
				width: 800px;
			
				border: 1px solid black;
				
			}
			th{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<!--
		1.动态表格展示数据以后 ,在搜索框输入搜索内容,实现满足条件的数据显示在表格上
		2.创建一个新建图书页面,要求图书id 名字必须填写,名字必须是中文并且
		长度在10个字以内,图书价格在1-100之间的数字,如果校验不满足条件不可以提交表单
		-->
		车牌号<input type="text" name="" id="keyid1" value=""/>
		车辆用途<input type="text" name="" id="keyid2" value=""/>
		<input type="button" name="" id="btn2" value="查询"  /><br />
		使用人<input type="text" name="" id="keyid3" value=""/>
		使用状态 <select name="stateid" id="stateid">
			<option value="0">请选择部门</option>
			<option value="1">空闲中</option>
			<option value="2">使用中</option>
			<option value="3">维修中</option>
			<option value="4">保养中</option>
		</select>
		<input type="button" name="" id="btn3" value="清空"/>
		<p style="color: red;"></p>
		<input type="button" name="" id="btn4" value="添加" />
		<input type="button" name="" id="btn5" value="修改" />
		<input type="button" name="" id="btn6" value="删除" />
		<input type="button" name="" id="btn7" value="刷新" />
		<div>
			<table >
				<tr style="height: 30px;">
					<th><input type="checkbox" name="" id="ckid" value="" /></th>
					<th>车牌号</th>
					<th>规格型号</th>
					<th>车辆用途</th>
					<th>使用人</th>
					<th>座位数</th>
					<th>车辆状态</th>
					<th>所属单位</th>
				</tr>
			</table>
		</div>
	</body>
	<script>
		$(function () {
			$("#btn2,#btn7").click(function (){
				$("table tr:gt(0)").remove();
				$.ajax({
					// 请求的方式
					type:"get",
					url:"http://localhost:8080/car",
					async:true,
					// data:{flag:"selectPro"},
					dataType:'json',
					success:function(data,status,xhr){
						console.log(data);
						// $("p:first").html(data.msg);
						$.each(data,function(i,e){
							var tr = $("<tr/>");
							$("<td/>").html("<input type='checkbox' />").appendTo(tr);
							$("<td/>").html(e.carnum).appendTo(tr);
							$("<td/>").html(e.brand).appendTo(tr);
							$("<td/>").html(e.carus.caruse).appendTo(tr);
							$("<td/>").html(e.emp.ename).appendTo(tr);
							$("<td/>").html(e.carseats).appendTo(tr);
							$("<td/>").html(e.state.statess).appendTo(tr);
							$("<td/>").html(e.unit.unitname).appendTo(tr);
							// 行追加到表中
							$("table").append(tr);
						});
					},
					// 失败
					error:function(XMLHttpRequest, textStatus, errorThrown){
					}
				});
			})
		});
		$("#btn4").click(function (){
			window.location.href=""
		})
	</script>
</html>
